<template>
	<view>
		<!-- 轮播图组件 -->
		<swiper class="card-swiper" 
			:class="dotStyle?'square-dot':'round-dot'" 
			:indicator-dots="true" 
			:circular="true"
			:autoplay="true" 
			interval="5000" 
			duration="500" 
			@change="cardSwiper" 
			indicator-color="#8799a3"
			indicator-active-color="#0081ff">
				<swiper-item v-for="(item,index) in swiperList" :key="item.id" :class="cardCur==index?'cur':''">
					<view class="swiper-item">
						<image :src="item.imageUrl" mode="aspectFill"></image>
					</view>
				</swiper-item>
		</swiper>
		
		<!-- 热门活动卡片 -->
		<view class="hotactivity">
			热门活动
			<view style="float: right;padding-right: 14rpx;color: #007AFF;" @click="showmore()">查看更多</view>
		</view>
		
		<view class="cu-card case" :class="isCard?'no-card':''" v-for="item in activityList" :key="item.id">
			<view class="cu-item shadow" @tap="todetail(item.id,item.userId)">
				<view class="image" style="height: 300px;">
					<image :src="item.ai[0].url"
					 mode="aspectFill" style="height: 300px;"></image>
					<view class="cu-bar bg-shadeBottom"> <text class="text-cut">{{item.activityDesc}}</text></view>
				</view>
				<view class="cu-list menu-avatar">
					<view class="cu-item">
						<view class="cu-avatar round lg" style="background-image:url(https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png);"></view>
						<view class="content flex-sub">
							<view class="text-grey">{{'名称:'+item.activityName}}</view>
							<view class="text-gray text-sm flex justify-between">
								{{item.activityDate}}
								<view class="text-gray text-sm">
									参与情况：{{item.tookNumber + '/' + item.limitNumber}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 抽屉组件 -->
		<uni-drawer :visible="visible">
		    <view style="padding:10rpx;">
					<!-- 分类组件 -->
					<view class="VerticalBox">
						<scroll-view class="VerticalNav nav" 
						scroll-y 
						scroll-with-animation 
						:scroll-top="verticalNavTop" 
						style="height:calc(100vh - 180upx)">
							<view class="cu-item" :class="index==tabCur?'text-green cur':''" v-for="(item,index) in categoryList" :key="index" @tap="TabSelect"
							 :data-id="index">
								Tab-{{item.name}}
							</view>
						</scroll-view>
						
						<scroll-view class="VerticalMain" 
						scroll-y 
						scroll-with-animation 
						style="height:calc(100vh - 180upx)"
						 :scroll-into-view="'main-'+mainCur" @scroll="VerticalMain">
							<view class="padding-top padding-lr" v-for="(item,index) in categoryList" :key="index" :id="'main-'+index">
								<view class="cu-bar solid-bottom bg-white">
									<view class="action">
										<text class="cuIcon-title text-green"></text>
										 Tab-{{item.name}}
									</view>
								</view>
								<view class="cu-list menu-avatar fenleistyle">
									<view class="cu-item" style="display: flex; flex-direction: column;" v-for="subItem in item.subCatList" :key="subItem.id">
										<view style="text-align: center;">
											<p @click="showId(subItem)" style="width: 150px;font-size: 45rpx;">{{subItem.name}}</p>
										</view>
										<view style="border-top: #EEEEEE 1px solid;line-height: 45px;text-align: center;" v-for="thirdItem in subItem.subCatList" :key="thirdItem.id">
											<p @click="showId(thirdItem)" style="width: 150px;font-size: 28rpx;">{{thirdItem.name}}</p>
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
		    </view>
		</uni-drawer>
		<view style="height: 60px;text-align: center;margin-top:20px;">
			<view style="line-height: 1.8;">
				CDIO-1组&copy;版权所有
			</view>
			<view style="line-height: 1.8;">
				<a style="text-decoration: none;color: #000000;" href="http://www.miit.gov.cn/">备案号:苏ICP备19058910号</a>
			</view>
		</view>
	</view>
</template>

<script>
	import uniDrawer from "components/uni-drawer/uni-drawer.vue"
	export default {
		components: {
			uniDrawer
		},
		data() {
			return {
				visible: false,
				list: [],
				tabCur: 0,
				mainCur: 0,
				verticalNavTop: 0,
				load: true,
				activityList:[],
				cardCur:0,
				isCard: false,
				swiperList:[],
				dotStyle: true,
				towerStart: 0,
				direction: '',
				thirdList:[],
				userId: '',
				categoryList:[{
				  "id": 1,
				  "name": "体育",
				  "type": 1,
				  "fatherId": 0,
				  "subCatList": []
				},
				{
				  "id": 2,
				  "name": "游戏",
				  "type": 1,
				  "fatherId": 0,
				  "subCatList": []
				},
				{
				  "id": 3,
				  "name": "户外",
				  "type": 1,
				  "fatherId": 0,
				  "subCatList": []
				}]
			};
		},
		onReady() {
			uni.hideLoading()
		},
		onLoad(options) {
			this.getCookies()
		    uni.startPullDownRefresh();
		},
		onPullDownRefresh() {
		    this.getSwiper()
			this.getCategory()
			this.getHotinfo()
		    setTimeout(function () {
		        uni.stopPullDownRefresh();
		    }, 1000);
		},
		methods: {
			showmore() {
				this.visible = !this.visible
			},
			DotStyle(e) {
				this.dotStyle = e.detail.value
			},
			// cardSwiper
			cardSwiper(e) {
				this.cardCur = e.detail.current
			},
			TowerSwiper() {
				
			},

			// towerSwiper触摸开始
			TowerStart(e) {
				this.towerStart = e.touches[0].pageX
			},

			// towerSwiper计算方向
			TowerMove(e) {
				this.direction = e.touches[0].pageX - this.towerStart > 0 ? 'right' : 'left'
			},

			// towerSwiper计算滚动
			TowerEnd(e) {
				let direction = this.direction;
				let list = this.swiperList;
				if (direction == 'right') {
					let mLeft = list[0].mLeft;
					let zIndex = list[0].zIndex;
					for (let i = 1; i < this.swiperList.length; i++) {
						this.swiperList[i - 1].mLeft = this.swiperList[i].mLeft
						this.swiperList[i - 1].zIndex = this.swiperList[i].zIndex
					}
					this.swiperList[list.length - 1].mLeft = mLeft;
					this.swiperList[list.length - 1].zIndex = zIndex;
				} else {
					let mLeft = list[list.length - 1].mLeft;
					let zIndex = list[list.length - 1].zIndex;
					for (let i = this.swiperList.length - 1; i > 0; i--) {
						this.swiperList[i].mLeft = this.swiperList[i - 1].mLeft
						this.swiperList[i].zIndex = this.swiperList[i - 1].zIndex
					}
					this.swiperList[0].mLeft = mLeft;
					this.swiperList[0].zIndex = zIndex;
				}
				this.direction = ""
				this.swiperList = this.swiperList
			},
			// 分类的方法
			TabSelect(e) {
				this.tabCur = e.currentTarget.dataset.id;
				this.mainCur = e.currentTarget.dataset.id;
				this.verticalNavTop = (e.currentTarget.dataset.id - 1) * 50
			},
			VerticalMain(e) {
				let that = this;
				let tabHeight = 0;
				if (this.load) {
					for (let i = 0; i < this.list.length; i++) {
						let view = uni.createSelectorQuery().select("#main-" + this.list[i].id);
						view.fields({
							size: true
						}, data => {
							this.list[i].top = tabHeight;
							tabHeight = tabHeight + data.height;
							this.list[i].bottom = tabHeight;
						}).exec();
					}
					this.load = false
				}
				let scrollTop = e.detail.scrollTop + 10;
				for (let i = 0; i < this.list.length; i++) {
					if (scrollTop > this.list[i].top && scrollTop < this.list[i].bottom) {
						this.verticalNavTop = (this.list[i].id - 1) * 50
						this.tabCur = this.list[i].id
						return false
					}
				}
			},
			getSwiper() {
				uni.request({
				    url: 'http://101.37.15.60:8080/home/carousel', //仅为示例，并非真实接口地址。
				    success: (res) => {
						this.swiperList = res.data.data
				    }
				});
			},
			getHotinfo() {
				uni.request({
				    url: 'http://101.37.15.60:8080/activity/getTen', //仅为示例，并非真实接口地址。
				    success: (res) => {
						this.activityList = res.data.data
						for(let i = 0;i<res.data.data.length;i++){
						  let time = res.data.data[i].activityDate
						  let arrTime = []
						  arrTime = time.split(' ')
						  let newTime = arrTime[0]
						  this.activityList[i].activityDate = newTime
						}
				    }
				});
			},
			getCategory() {
			  let arr = this.categoryList
			  for(let i = 1;i<4;i++) {
			   uni.request({
			       url: 'http://101.37.15.60:8080/home/subCat/'+i, //仅为示例，并非真实接口地址。
			       success: (res) => {
					   arr[i - 1].subCatList = res.data.data
			       }
			   });
			  }
			  this.categoryList = arr
			},
			showId(item) {
				if(item.subCatList == null || item.subCatList == "") {
					if(this.Authorization){
						uni.navigateTo({
							url: '../activitylist/activitylist?categoryId='+item.id+'&name='+item.name,
						    success: res => {}
						});
					}else{
						uni.showToast({
							icon:'none',
						    title: '请先登录~',
						    duration: 1000
						})
						setTimeout(function(){
							uni.reLaunch({
								url: '../login/login',
								success: res => {}
							})
						},1000)
					}
				}
			},
			todetail(activityid,userID) {
				let ismine
				if(this.Authorization){
					if(userID == this.userId) {
						ismine = true
						uni.navigateTo({
							url: '../activitydeatil/activitydeatil?activityid='+activityid+'&ismine='+ismine,
						    success: res => {}
						});
					}else{
						ismine = false
						uni.navigateTo({
							url: '../activitydeatil/activitydeatil?activityid='+activityid+'&ismine='+ismine,
						    success: res => {}
						});
					}
				}else{
					uni.showToast({
						icon:'none',
					    title: '请先登录~',
					    duration: 1000
					})
					setTimeout(function(){
						uni.reLaunch({
							url: '../login/login',
							success: res => {}
						})
					},1000)
				}
				
			},
			getCookies() {
			  if (document.cookie.length > 0) {
			    var arr = document.cookie.split("; "); //这里显示的格式需要切割一下自己可输出看下
			    for (var i = 0; i < arr.length; i++) {
			      var arr2 = arr[i].split("="); //再次切割
			      //判断查找相对应的值
				  if (arr2[0] == "id") {
				      this.userId = arr2[1]; //保存到保存数据的地方
				  }else if(arr2[0] == "Authorization") {
					  this.Authorization = arr2[1];
				  }
			    }
			  }
			}
		},
		mounted() {
			this.getSwiper()
			this.getHotinfo()
			this.getCategory()
		}	
	}
</script>

<style scoped>
	/* 轮播图样式 */
	.tower-swiper .tower-item {
		transform: scale(calc(0.5 + var(--index) / 10));
		margin-left: calc(var(--left) * 100upx - 150upx);
		z-index: var(--index);
	}
	/* 热门活动文字样式 */
	.hotactivity {
		background-color: #EEEEEE;
		line-height: 50rpx;
		padding-left: 36rpx;
		font-size: 32rpx;
	}
	/* 分类的样式 */
	.VerticalNav.nav {
		width: 200upx;
		white-space: initial;
	}
	
	.VerticalNav.nav .cu-item {
		width: 100%;
		text-align: center;
		background-color: #fff;
		margin: 0;
		border: none;
		height: 50px;
		position: relative;
	}
	
	.VerticalNav.nav .cu-item.cur {
		background-color: #f1f1f1;
	}
	
	.VerticalNav.nav .cu-item.cur::after {
		content: "";
		width: 8upx;
		height: 30upx;
		border-radius: 10upx 0 0 10upx;
		position: absolute;
		background-color: currentColor;
		top: 0;
		right: 0upx;
		bottom: 0;
		margin: auto;
	}
	
	.VerticalBox {
		display: flex;
	}
	
	.VerticalMain {
		background-color: #f1f1f1;
		flex: 1;
	}
	.fenleistyle>.cu-item {
		justify-content: flex-start;
		height: auto;
	}
</style>
